<!DOCTYPE html>
<html class="x-admin-sm">

<head>
	<meta charset="UTF-8">
	<title>电子学会比赛管理系统</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
	<link rel="stylesheet" href="./css/font.css">
	<link rel="stylesheet" href="./css/common.css">
	<link rel="stylesheet" href="./css/xadmin.css">
	<script type="text/javascript" src="./js/abkj/ext/menu.js"></script>
	<script type="text/javascript" src="./js/abkj/auth/api/menu.js"></script>
	<script type="text/javascript" src="./js/abkj/auth/api/rolemenu.js"></script>
	
	<script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
	<script type="text/javascript" src="./js/xadmin.js"></script>
	<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
	<!--[if lt IE 9]>
	<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
	<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
	<![endif]-->
</head>

<body>
<div class="layui-fluid" v-cloak>
	<div class="layui-row">
		<form action="" method="post" class="layui-form layui-form-pane" lay-filter="form" @submit.prevent>
			<div class="layui-form-item">
				<label for="name" class="layui-form-label">
					<span class="x-red">*</span>角色名
				</label>
				<div class="layui-input-inline">
					<input :readonly="id" type="text" id="name" name="name" required="" lay-verify="required" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">
					拥有权限
				</label>
				<section id="roleTree"></section>
				<!--<table class="layui-table layui-input-block">-->
					<!--<tbody>-->
					<!--<tr>-->
						<!--<td>-->
							<!--<input type="checkbox" name="like1[write]" lay-skin="primary" lay-filter="father" title="用户管理">-->
						<!--</td>-->
						<!--<td>-->
							<!--<div class="layui-input-block">-->
								<!--<input name="id[]" lay-skin="primary" type="checkbox" title="用户停用" value="2">-->
								<!--<input name="id[]" lay-skin="primary" type="checkbox" value="2" title="用户删除">-->
								<!--<input name="id[]" lay-skin="primary" type="checkbox" value="2" title="用户修改">-->
								<!--<input name="id[]" lay-skin="primary" type="checkbox" value="2" title="用户改密">-->
								<!--<input name="id[]" lay-skin="primary" type="checkbox" value="2" title="用户列表">-->
								<!--<input name="id[]" lay-skin="primary" type="checkbox" value="2" title="用户改密">-->
								<!--<input name="id[]" lay-skin="primary" type="checkbox" value="2" title="用户列表">-->
								<!--<input name="id[]" lay-skin="primary" type="checkbox" value="2" title="用户改密">-->
								<!--<input name="id[]" lay-skin="primary" type="checkbox" value="2" title="用户列表">-->
							<!--</div>-->
						<!--</td>-->
					<!--</tr>-->
					<!--<tr>-->
						<!--<td>-->
							<!---->
							<!--<input name="id[]" lay-skin="primary" type="checkbox" value="2" title="文章管理" lay-filter="father">-->
						<!--</td>-->
						<!--<td>-->
							<!--<div class="layui-input-block">-->
								<!--<input name="id[]" lay-skin="primary" type="checkbox" value="2" title="文章添加">-->
								<!--<input name="id[]" lay-skin="primary" type="checkbox" value="2" title="文章删除">-->
								<!--<input name="id[]" lay-skin="primary" type="checkbox" value="2" title="文章修改">-->
								<!--<input name="id[]" lay-skin="primary" type="checkbox" value="2" title="文章改密">-->
								<!--<input name="id[]" lay-skin="primary" type="checkbox" value="2" title="文章列表">-->
							<!--</div>-->
						<!--</td>-->
					<!--</tr>-->
					<!--</tbody>-->
				<!--</table>-->
			</div>
			<div class="layui-form-item">
				<button class="layui-btn" lay-submit="" lay-filter="add">{{ id ? '修改' : '增加'}}</button>
			</div>
		</form>
	</div>
</div>
<script src="./js/abkj/ext/menu.js"></script>
<script src="./js/jquery.min.js"></script>
<script src="./js/abkj/slAjax.js"></script>
<script src="./js/abkj/fun_tool.js"></script>

<script src="./js/vue.min.js"></script>
<script>
$(function () {
	
	var tool = fun_tool()
	var id = tool.getUrlParam('id')
	var roleMenu=null
	new Vue({
		el: '.layui-fluid',
		data: {
			id: id
		},
		mounted: function () {
			var vm = this
			layui.use(['tree', 'form', 'layer'], function () {
				$ = layui.jquery
				var form = layui.form
				var layer = layui.layer
				vm.renderRoleTree()
				if (vm.id) {
					form.val('form', {
						name: '角色'
					})
				}
				//自定义验证规则
				form.verify({
					nikename: function (value) {
						if (value.length < 5) {
							return '昵称至少得5个字符啊'
						}
					},
					pass: [/(.+){6,12}$/, '密码必须6到12位'],
					repass: function (value) {
						if ($('#L_pass').val() != $('#L_repass').val()) {
							return '两次密码不一致'
						}
					}
				})
				
				//监听提交
				form.on('submit(add)', function (data) {
					var selectRoleIds = layui.tree.getChecked('roleTree')
					if (selectRoleIds.length === 0) return layer.msg('请至少勾选一个权限', {icon: 5})
						//发异步，把数据提交给php
					layer.msg(id ? '修改' : '新增' + '成功')
					console.log(data.field,selectRoleIds)
					data.selectRoleIds = selectRoleIds
					var varReq={
						    roleName:data.field.name,
						    isAdd:id ?false:true,
						    roleId:id,
						    menuIds:[]
						}
					for(var i=0;i<selectRoleIds.length; ++i){
						varReq.menuIds.push(selectRoleIds[i].id)
						if(selectRoleIds[i].children != null){
							for(var t=0;t<selectRoleIds[i].children.length;++t)
							varReq.menuIds.push(selectRoleIds[i].children[t].id)
						}
					}	
					updateMenu(varReq,function(data){
						var index = parent.layer.getFrameIndex(window.name)
						//关闭当前frame
						parent.layer.close(index)	
					})	
					
					return false
				})
			})
		},
		methods: {
			renderRoleTree: function () {
				var getRoleTree = function (query, fnSuccess, fnError) {
					var param={
						eq:{
							roleId:id
						}
					}
					
					RoleMenuqueryList(param,function(data){
						roleMenu=data;
						loadAllMenu({},function(data2){
							fnSuccess(data2)
						})
					})
					
				}
				// 获取角色tree
				getRoleTree({}, function (data) {
					layui.tree.render({
						elem: '#roleTree',
						id: 'roleTree',
						data: data,
						showCheckbox: true
					})
					// 调用接口，获取到当前角色的权限， 然后选中
					var selMenus=[]
					for(var i=0;i<roleMenu.length; ++i){
						if(roleMenu[i].menuId > 100){
							selMenus.push(roleMenu[i].menuId)
						}
					}
					layui.tree.setChecked('roleTree', selMenus)	
				})
			}
		}
	})
})
</script>
</body>

</html>
